<template>
    </div>
    <div id="header">
        <div class="eux-logo">
            <a href="/"><img src="/dist/img/admin/eux_logo.png" alt="EUX"></a>
        </div>
        <div class="small-header">
            <a href="#">
                <img :src="active_url">
                <p>{{active}}</p>
            </a>
            <a href="/user/logout" class="exit">退出</a>
            <a href="#" class="self-name">{{ username }}</a>
            <a href="#"><img :src="avatar | avatar" alt="头像" class="self-img img-circle"></a>
        </div>
    </div>
    <aside class="sidebar">
        <ul>
            <li class='{{active_li === 1 ? "selected" : ""}}' v-on:click="changeActive($event, 1)">
                <a v-link="{ path: '/work' }">
                    <img src="/dist/img/admin/homework_ico.png">
                    <p>作业考评</p>
                </a>
            </li>
            <li class='{{active_li === 2 ? "selected" : ""}}' v-on:click="changeActive($event, 2)">
                <a v-link="{ path: '/grade' }">
                    <img src="/dist/img/admin/grade_check_ico.png">
                    <p>绩效考核</p>
                </a>
            </li>
            <li class='{{active_li === 3 ? "selected" : ""}}' v-on:click="changeActive($event, 3)">
                <a v-link="{ path: '/concat' }">
                    <img src="/dist/img/admin/staff_message_ico.png">
                    <p>员工信息</p>
                </a>
            </li>
        </ul>
    </aside>
</template>
<style>
    .sidebar{
        width: 220px;
        height: 100%;
        padding:0;
        overflow: hidden;
        background-color: #333742;
        float: left;
    }
    .sidebar ul{
        margin-top: 50px;
        width: 100%
    }
    .sidebar li{
        clear:both;
        height: 40px;
        margin:0;
    }
    .sidebar li a{
        display: block;
        width: 220px;
        height: 40px;
    }
    .sidebar li:hover, .sidebar li.selected{
        background-color: #24272f;
        border-left: 5px solid #3498db;
    }
    .sidebar li img{
        margin:10px 20px 0 40px;
        float: left;
        height: 20px;
        width: 25px;
        line-height: 50px;
    }
    .sidebar li.selected img{
        margin-left: 35px;
    }
    .v-link-active li img,  .sidebar li:hover img{
        margin-left: 35px;
    }
    .sidebar li p{
        font-size: 14px;
        color: #e5ebee;
        line-height: 40px;
        float: left;
        margin:0;
    }
    #header{
        height: 70px;
    }
    .eux-logo{
        width: 220px;
        height: 70px;
        background-color: #414550;
        float: left;
    }
    .eux-logo img{
        width: 111px;
        height: 27px;
        display: block;
        margin:24px auto 0 auto;
        /*margin:12% auto 0 auto;*/
    }
    .small-header{
        height: 70px;
        background-color: #353841;
    }

    .small-header img{
        margin:23px 0 0 40px;
        float: left;
        width: 27px;
        height: 24px;
    }
    .small-header p{
        font-size: 18px;
        float: left;
        color: #fff;
        width: 100px;
        margin:0 0 0 34px;
        height: 70px;
        line-height: 70px;
    }

    .small-header .exit, .small-header .self-name, .small-header .self-img{
        float: right
    }
    .small-header .exit{
        font-size: 16px;
        color: #e74c3c;
        margin:0 36px 0 33px;
        height: 70px;
        line-height: 70px;
    }
    .small-header .self-name{
        font-size: 16px;
        color: #fff;
        margin:0 0 0 15px;
        height: 70px;
        line-height: 70px;
    }
    .small-header .self-img{
        margin-top: 14px;
        width: 40px;
        height: 40px;
    }
</style>
<script>
    import Vue from 'vue';

    Vue.use(require('vue-resource'));
    Vue.filter('avatar', function(value){
        var ava_list = ['/dist/img/user/avatar1.jpg','/dist/img/user/avatar2.jpg','/dist/img/user/avatar3.jpg','/dist/img/user/avatar4.jpg','/dist/img/user/avatar5.jpg','/dist/img/user/avatar6.jpg','/dist/img/user/avatar7.jpg','/dist/img/user/avatar8.jpg','/dist/img/user/avatar9.jpg','/dist/img/user/avatar10.jpg','/dist/img/user/avatar11.jpg','/dist/img/user/avatar12.jpg'];
        return ava_list[parseInt(value)];
    });
    export default{
        data(){
            return{
                username: "",
                avatar: 1,
                active: '员工信息',
                active_url: '/dist/img/admin/homework_ico.png',
                active_li: 3
            }
        },
        methods: {
            changeActive: function(event, num){
                var otarget = event.currentTarget;
                var text = otarget.getElementsByTagName('p')[0].innerText;
                var url = otarget.getElementsByTagName('img')[0].src;
                this.active = text;
                this.active_url = url;
                this.active_li = num;
            }
        },
        ready: function(){
            this.$http.get('../user/detail', function(data) {
//                console.log(data);
                this.username = data.username;
                this.avatar = data.avatar;
            }).error(function (data, status){
                console.log(data+status);
            });
        }
    }
</script>
